
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>G4F Demo</title>
    <link rel="apple-touch-icon" sizes="180x180" href="dist/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="dist/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="dist/img/favicon-16x16.png">
    <link rel="manifest" href="/dist/img/site.webmanifest">
    <script src="dist/js/framework.js"></script>
    <style>
        :root {
            --colour-1: #000000;
            --colour-2: #ccc;
            --colour-3: #e4d4ff;
            --colour-4: #f0f0f0;
            --colour-5: #181818;
            --colour-6: #242424;
            --accent: #8b3dff;
            --gradient: #1a1a1a;
            --background: #16101b;
            --size: 70vw;
            --top: 50%;
            --blur: 40px;
            --opacity: 0.6;
        }

        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

        /* Body and text color */
        body {
            background: var(--background);
            color: var(--colour-3);
            font-family: "Inter", sans-serif;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-weight: bold;
        }

        /* Container for the main content */
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
        }

        header {
            font-size: 3rem;
            text-transform: uppercase;
            margin: 20px;
            color: var(--colour-4);
        }

        iframe {
            background: transparent;
            width: 100%;
            border: none;
        }

        #background {
            height: 100%;
            position: absolute;
            top: 0;
        }

        .container * {
            z-index: 2;
        }

        .stream-widget {
            max-height: 0;
            transition: max-height 0.15s ease-out;
            color: var(--colour-5);
            overflow: scroll;
            text-align: left;
        }

        .stream-widget.show {
            max-height: 1000px;
            height: 1000px;
            transition: max-height 0.25s ease-in;
            background: rgba(255,255,255,0.7);
            border-top: 2px solid rgba(255,255,255,0.5);
            padding: 20px;
        }

        .stream-widget img {
            max-width: 320px;
            display: block;
        }

        #stream-container {
            width: 100%;
        }

        .description {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: var(--colour-2);
        }

        .input-field {
            width: 80%;
            max-width: 400px;
            padding: 12px;
            margin: 10px 0;
            border: 2px solid var(--colour-6);
            background-color: var(--colour-5);
            color: var(--colour-3);
            border-radius: 8px;
            font-size: 1.1rem;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--accent);
        }

        .button {
            background-color: var(--accent);
            color: var(--colour-3);
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 15px;
            width: 100%;
            max-width: 400px;
            font-weight: bold;
        }

        .button:hover {
            background-color: #7a2ccd;
        }

        .footer {
            margin-top: 30px;
            font-size: 0.9rem;
            color: var(--colour-2);
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js"></script>
</head>
<body>
    <iframe id="background" src="background.html"></iframe>

    <!-- Main Content -->
    <div class="container">
        <header>
            G4F Demo
        </header>
        <div class="description">
            <span>Welcome to the G4F Demo!</span><br>
            <span>AI assistant is ready to assist you.</span>
        </div>

        <!-- Input and Button -->
        <form action="/chat/">
            <input type="text" name="prompt" class="input-field" placeholder="Enter your query...">
            <button class="button">Open Chat</button>
        </form>

        <!-- Footer -->
        <div class="footer">
            <p>&copy; 2025 G4F. All Rights Reserved.</p>
            <p>Powered by the G4F framework</p>
        </div>

        <div class="stream-widget">Loading...</div>
    </div>
    <script>
        const streamWidget = document.querySelector('.stream-widget');
        (async () => {
            await window.connectToBackend();
            window.addEventListener('load', async function() {
                if (!localStorage.getItem(window.translationKey)) {
                    try {
                        if (await translateAll()) {
                            window.location.reload();
                        }
                    } catch (e) {
                        console.debug(e);
                    }
                }
            });
            const randIdx = Math.floor(Math.random() * 12)
            if (randIdx < 3) {
                search = "xtekky/gpt4free releases";
            } else if (randIdx < 6) {
                search = "developer news";
            } else {
                search = (navigator.language == "de" ? "news in deutsch" : navigator.language == "en" ? "world news" : `news in ${navigator.language}`);
            }
            let summaryPrompt = "Present the news from the search results in a clear and organized markdown format.";
            summaryPrompt += "\nInclude a headline, a brief summary, key points, and one or more relevant images with proper attribution.";
            summaryPrompt += "\nEnsure the content is concise, well-structured, and visually appealing.";
            summaryPrompt += `\nResponse in language: ${navigator.language} (iso-code)`;
            const url = `${window.backendUrl}/backend-api/v2/create?prompt=${summaryPrompt}&stream=1&web_search=${search}`;
            const response = await fetch(url, {
                method: 'GET'
            });
            const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
            let buffer = [];
            let text = "";
            while (true) {
                const { value, done } = await reader.read();
                if (done) {
                    break;
                }
                buffer.push(value);
                text = buffer.join("");
                streamWidget.innerText = text;
            }
            clearTimeout(scrollToBottom);
            if (text && text.indexOf('"error"') < 0) {
                streamWidget.classList.add('show');
                streamWidget.innerHTML = `${renderMarkdown(filterMarkdown(text, "markdown", text))}`;
                streamWidget.scrollTop = "0px";
            }
        })();
        setTimeout(()=>{
            streamWidget.classList.add('show');
        }, 1000);
        let scrollToBottom = null;
        let scrollToBottomCallback = () => {
            streamWidget.scrollTop = streamWidget.scrollHeight;
            if (streamWidget.scrollHeight - streamWidget.scrollTop < 2 * streamWidget.scrollHeight) {
                scrollToBottom = setTimeout(scrollToBottomCallback, 1000);
            }
        };
        scrollToBottom = setTimeout(scrollToBottomCallback, 1000);
    </script>
</body>
</html>